<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>路龙飞</title>
		<style>
		   #bg{
		   	   height: 452px;
		   	   width: 720px;
		   	   background-image:url(tiankong.jpg) ;
		   }
		   .apple{
		   	   height: 45px;
		   	   width: 44px;
		   	   background-image:url(timg.png);
		   	   text-align: center;
		   	   position:absolute;
		   	   line-height: 42px;
		   	    
		   }
		  
		   #top{
		   	   height: 369px;
		   	   position: relative;
		   	   overflow: hidden;
		   }
		   #bottom{
               height: 81px;	   	
		   }
           #time{
           	   height: 27px;
		   	   width:260px;
		   	   position: relative;
		   	   left: 10px;
           }
           #zhengquelv{
           	   height: 27px;
		   	   width:260px;
		   	   position: relative;
		   	   left: 10px;
           }
           #sudu{
           	   height: 27px;
		   	   width:260px;
		   	   position: relative;
		   	   left: 10px;
           }
		   #kaishi{
		   	   height: 40px;
		   	   width:40px;
		   	   float: right;
		   	   position: absolute;
		   	   left: 10px;
		   	   top: 400px;
		   	   border: 1px solid red;
		   	   cursor: pointer; 
		   	   border-radius: 50%;
		   	   text-align: center;
		   	   line-height: 42px; 
		   }
		   #zhantin{
		   	   height: 40px;
		   	   width:40px;
		   	   float: right;
		   	   position: absolute;
		   	   left: 60px;
		   	   top: 400px;
		   	   border: 1px solid red;
		   	   cursor: pointer;
		   	   border-radius: 50%;
		   	   text-align: center;
		   	   line-height: 42px;
		   }
		   #tuichu{
		   	   height: 40px;
		   	   width:40px;
		   	   float: right;
		   	   position: absolute;
		   	   left: 160px;
		   	   top: 400px;
		   	   border: 1px solid red;
		   	   cursor: pointer;
		   	   border-radius: 50%;
		   	   text-align: center;
		   	   line-height: 42px;
		   }
		   #jieshu{
		   	   height:40px;
		   	   width:40px;
		   	   float: right;
		   	   position: absolute;
		   	   left: 110px;
		   	   top: 400px;
		   	   border: 1px solid red;
		   	   cursor: pointer;
		   	   border-radius: 50%;
		   	   text-align: center;
		   	   line-height: 42px; 
		   }
			.boot{
				width:250px;
				height: 81px;
				float:left
			}
		</style>
	</head>
	<body>
	<div id="bg">
		<div id="top">
		</div>
		<div id="bottom">
			<div class="boot" id="left">
			    <div id="kaishi"><span onclick="start()">开始</span>	</div>
			    <div id="zhantin"><span onclick="pause()">暂停</span></div>
			    <div id="tuichu"><span onclick="over()">退出</span></div>
			    <div id="jieshu"><span onclick="stop()">结束</span></div>
			</div>
			<div class="boot" id="mid">
				<div id="zhengquelv" class="text">正确率：100%</div>
				<div id="time" class="text">时间：00:00:00</div>
				<div id ="sudu" class="text">速度：1个/分钟</div>
			</div>
			
		</div>
	</div>
	<script type="text/javascript">
		var time=0;
		var clock=0;
		var count=0;
		var num = 0;
		var n = 0;
		function start(){
			if(clock==0){
			   clock=setInterval(function(){
			   	var top=document.querySelector("#top");
			   	for(var i=0;i<top.children.length;i++)
			   	{
                   var apple=top.children[i];
                   apple.style.top=parseInt(apple.style.top)+10+"px";
                   apple.style.left=parseInt(apple.style.left)+5+"px";
                   var temp = parseInt(top.children[i].style.top);
							if (temp > 369){
								count++;
								top.removeChild(top.children[i]);	
							}
							var success = document.querySelector("#zhengquelv");
							var rate = parseInt((1-count/num)*100);
							if(isNaN(rate)){
								rate = 100;
							}
							success.innerHTML="正确率:" + rate + "%"
			   	}
		       },150);
		       clock1=setInterval(function(){
		       	var div = document.createElement("div");
		       	div.className="apple";
		       	div.style.left =parseInt(Math.random() * 500)+"px";
		       	div.style.top ="33px";
		       	var ch =parseInt(Math.random()*26)+65;
		       	div.setAttribute("key",ch);
		       	div.innerHTML = "&#" + ch + ";";
		       	document.querySelector("#top").appendChild(div);
		       	num++;
		       },1200);
		        clock2=setInterval(function(){
		       	time++;
		       	var ss = time % 60;
		       	ss = ss < 10 ? "0" + ss : ss;
		       	var mm = parseInt(time / 60 % 60);
		       	mm = mm < 10 ? "0" + mm : mm;
		       	var hh = parseInt(time / 3600);
		       	hh = hh < 10 ? "0" + hh : hh;
		       	var divtime = document.querySelector("#time");
		       	divtime.innerHTML = "时间：" + hh +":" + mm +":" + ss;
		       },1000); 
		       speed_clock=setInterval(function(){
					var speed = document.querySelector("#sudu");
					speed.innerHTML="速度:" + parseInt(60*n/time) + "个/分钟";
					
				},1000);
		    }
		}
		window.onkeydown=function(event){
			if(clock != 0)
			{
			var divtop =document.querySelector("#top");
			for(var i=0;i<divtop.children.length;i++)
			{
				var k = divtop.children[i].getAttribute("key");
				if(k == event.keyCode)
				{
					divtop.removeChild(divtop.children[i]);
					n++;
					break;
				}
			}
			}
		}
		function pause(){
			clearInterval(clock);
			clearInterval(clock1);
			clearInterval(clock2);
			clock=0;
			num=0;
		}
		function over(){
			window.close();
		}
		function stop(){
			var top=document.querySelector("#top");
			top.innerHTML = "";
			pause();
			var divtime = document.querySelector("#time");
		    divtime.innerHTML = "时间：00:00:00";	
		}
	</script>
	</body>
</html>
